{extends file="../home.html"}
{block name="title"}{$head_title}{/block}

{block name="css"}
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Css/front/front_css/refresh_load.css?version={$version}"/>
<link href="__PUBLIC__/Css/front/css/louzhu_huitie.css?version={$version}" type="text/css" rel="stylesheet">
<style type="text/css">
body{
	background: #F3F3F3;
	padding-top: 2.2rem;
}
/*全屏查看器样式*/
.fullscreen{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 10000;
	background-color: #000;
	display: none;
}
.fullscreen .fullscreen_slide{
	background-color: #000;
}
</style>
{/block}
{block name="content"}

	<div class="com_header">
		<a href="javascript:;" class="go_back"><i class="icon_back"></i></a>{$head_title}
	</div>

	<div class="user_header clearfix" >
		 <a href="/FrontUserCenter/others_space/user_id/{$post_user.user_id}" class="avatar">
		 	<img src="{$post_user.headimgurl}?imageView2/1/w/200/h/200/imageslim" alt="">
		 </a>
		 <div class="user_main clearfix">
		 	<a class="nickname native_go" href="/FrontUserCenter/others_space/user_id/{$post_user.user_id}">{$post_user.nickname}</a>
		 	{foreach from=$title_list item=v}
		 	<i class="tag" style="background-color:{$v.title_color}">{$v.title_name}</i>
		 	{/foreach}
		 </div>
		 <p>{$cf_reply.addtime}<span class="type">{$channel.channel_name}</span></p>
		 <div class="icon_huitie"></div>
	</div>
	<div class="post_content">
		<h2>{$cf_reply.title}</h2>
		<p>{$cf_reply.content}</p>
		<div class="imgbox">
			{foreach from=$cf_reply.imgs item=img key=key} 
			<img src="{$img}?imageMogr2/auto-orient/imageslim" alt="" data-row="{$key}" data-img='{$img}?imageMogr2/auto-orient/imageslim'>
			{/foreach}
		</div>
	</div>
	
<!-- 全屏图片查看器-->
<div class="swiper-container fullscreen" id="fullscreen">
	<div class="swiper-wrapper" id="swiper_wrapper">
	</div>
</div>
{/block}
{block name="js"}

{literal}
<script>
$(function(){
			$(document).on('click', '.imgbox img', function(event){
				event.preventDefault();
				var row = $(this).data('row');
				console.log
				var img_urls = [];
				console.log($(this).parent().parent())
				$(this).parent().find('img').each(function() {        
				    img_urls.push($(this).data("img"));
				});
				var html = '';
				for(i=0;i<img_urls.length;i++){
					html += '<div class="swiper-slide fullscreen_slide"><img src="'+img_urls[i]+'"/></div>';
				}
				$('#swiper_wrapper').empty().append(html);
				console.log(img_urls);
				$('#fullscreen').fadeIn();
				var full_swiper = new Swiper('.fullscreen',{
				    //pagination : '.full_pagination',
				});

				full_swiper.slideTo(row, 0, false);
				if(row==0){
					$("#swiper_wrapper").css({
						"transform": "translate3d(0px, 0px, 0px)"
					});
				}
				
			});
			// 关闭查看器
			$('#fullscreen').on('click', function(event) {
				event.preventDefault();
				$(this).fadeOut();
			});
		})
</script>
{/literal}
{/block}